<style rel="stylesheet/scss" lang="scss">
.dispalyPic{
    width: 200px;
    float: left;
    margin-right: 50px;
    vertical-align: middle;
}
.btn{
    width: 40%;
    text-align: center;
    margin-top: 60px;
}
</style>

<template>
    <div>
        <div class="page_create customerProNew">
            <div class="page_d_title">
                <!-- <span>{{pageTitle}}</span> -->
            </div>
            <div class="page_d_con">
                <div class="page_d_con_left cpa_page_left" :class="{page_d_con_left_widthAll:!isRightBox}">
                    <div class="banner_part_line page_create_set_line">创意信息</div>
                    <hr style="height:1px;border:none;border-top:1px solid #b6c7d3; margin-right:34px; margin-bottom:10px;"/>
                    <el-form ref="form" label-width="125px">
                        <el-form-item label="创意名称：">
                            <span>{{adName}}</span>
                        </el-form-item>
                        <el-form-item label="投放日期：" style="height:auto;">
                            <span>{{adGrpAttrJSON.extensCycle}}</span>
                        </el-form-item>
                        <el-form-item label="广告出价：" style="height:auto;">
                            <span>{{adAttrJson.price}}</span>
                        </el-form-item>
                        <el-form-item label="每日预算：" style="height:auto;">
                            <span>{{adGrpAttrJSON.budget}}</span>
                        </el-form-item>
                        <el-form-item label="出价方式：" style="height:auto;">
                            <span>{{adGrpAttrJSON.mode}}</span>
                        </el-form-item>
                        <el-form-item label="投放地域：" style="height:auto;">
                            <span>{{adGrpAttrJSON.area}}</span>
                        </el-form-item>
                        <el-form-item label="投放时段：" style="height:auto;">
                            <span>{{adGrpAttrJSON.launchPeriod}}</span>
                        </el-form-item>
                        <el-form-item label="投放媒体：" style="height:auto;">
                            <span>{{adGrpAttrJSON.media}}</span>
                        </el-form-item>
                    </el-form>
                    <div class="banner_part_line page_create_set_line">素材信息</div>
                    <hr style="height:1px;border:none;border-top:1px solid #b6c7d3; margin-right:34px;margin-bottom:10px;"/>
                    <el-form ref="form" label-width="125px">
                        <el-form-item label="推广链接：" style="height:auto;">
                            <span>{{adAttrJson.extUrl}}</span>
                        </el-form-item>
                        <el-form-item label="创意文案：">
                            <span>{{adAttrJson.desc}}</span>
                        </el-form-item>
                        <el-form-item label="创意图片：" style="height:auto;">
                            <img class="dispalyPic"  v-for="img_src in picArr"
                             :src="img_src" alt="">
                            <!-- <img class="dispalyPic"  src="../../assets/login_bg.jpg" alt="">
                            <img class="dispalyPic"  src="../../assets/20180130bb15.jpg" alt=""> -->
                            <!-- <div class="dispalyPic" v-for="item in adAttrJson.imgUrls"><img :src="item" alt=""></div> -->
                        </el-form-item>
                    </el-form>
                    <div class="btn">
                        <el-button type="danger"  @click="go_back()">返回</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isRightBox: false,
                dateStatus: false,
                uploadButStatus: true,
                fileList: [],
                adAttrJson:{},
                adGrpAttrJSON:{},
                picArr:[],
                adid:'',
                adName:''
            };
        },
        created() {
            this.adid = this.$route.query.id;
            this.pageInfo(this.adid);
        },
        methods: {
            pageInfo(id) {
                this.$http({
                    method: 'get',
                    url: this.apiUrl.adAddetail,
                    params: {
                        adid:id
                    }
                }).then(res => {
                    if (res.status = 200) {
                        // console.log(res);
                        this.adAttrJson = res.data.adAttrJson;
                        this.adGrpAttrJSON = res.data.adGrpAttrJSON;
                        this.adName = res.data.adName;
                        var urlStr = res.data.adAttrJson.imgUrls;
                        var urlStr1 = urlStr.substring(0,urlStr.length-1);
                        var imgUrlArr = urlStr1.split(';');
                        this.picArr =imgUrlArr;
                        console.log(this.picArr);
                    }else{
                        this.$message({
                            type: 'error',
                            message: '服务器繁忙，请稍后再试'
                        });
                    }
                }).catch(err => {

                });
            },
            go_back() {
                this.$router.back();
            },
        }
    };
</script>
